<!-- 求租 -->
<template>
  <div class="box">
    <div class="box-header">
      <div @click="fanhui">《返回</div>
      <div>求租</div>
      <div></div>
    </div>
    <div class="box-bbody">
      <div class="B-box-A"></div>
      <div class="B-box-B">
        <!-- 开始渲染 -->
        <dl v-for="(item, index) in list" :key="(item, index)">
          <div class="For-box">
            <!-- 渲染一 -->
            <div class="For-header">
              <div class="Xuanran">
                <div class="ran-yi">
                  <span>用户名称:{{ item.name }}</span
                  ><span>时间：{{ item.nnum }}/天</span>
                </div>
                <div class="ran-er">
                  <p>{{ item.title }}</p>
                </div>
              </div>
              <div class="Xuanraner">
                <div class="Xuan-yixiang">
                  <span
                    >意向区域: <b>{{ item.tttle }}</b></span
                  ><span
                    >意向价格: <b>{{ item.num }}.00</b>/月</span
                  >
                </div>
                <!-- 这两个longing图一定要有点击、跳转到消息、跳转到电话 -->
                <div class="Xuang-login">
                  <span @click="long - tu1"><van-icon name="chat" /></span>
                  <span @click="long - tu2"><van-icon name="phone" /></span>
                </div>
              </div>
            </div>
          </div>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../utility/request";
// import { defineComponent } from "vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      list: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    fanhui() {
      this.$router.push("/Home");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    const res = await request("/gteList");
    console.log(res.list);
    this.list = res.list;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='scss' scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: paleturquoise;
}
.box-header {
  color: #fff;
  width: 100%;
  height: 50px;
  background: blue;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  border: 1px solid #000;
}
.box-bbody {
  width: 100%;
  flex: 1;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background: rgb(238, 243, 170);
  border-top: 1px solid #ccc;
}
.B-box-A {
  width: 100%;
  height: 50px;
  background: rgb(255, 255, 255);
}
.B-box-B {
  margin: 0 auto;
  width: 100%;
  flex: 1;
  overflow-x: hidden;
  // display: flex;
  // flex-direction: column;
  background: rgb(199, 199, 199);
}
.B-box-B dl {
  width: 100%;
  height: 150px;
  background: pink;
  background: rgb(255, 255, 255);
  margin-bottom: 20px;
}
.For-box {
  width: 100%;
  height: 150px;
  background: rgb(255, 255, 255);
  padding: 0px 20px;
}
.Xuanran {
  width: 100%;
  height: 100px;
  background: #fff;
  border-bottom: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  color: rgb(117, 117, 117);
}
.ran-yi {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.ran-er {
  width: 100%;
  height: 50px;
  line-height: 50px;
}
.Xuanraner {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.Xuan-yixiang {
  width: 80%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.Xuan-yixiang span b {
  color: red;
}
.Xuang-login {
  width: 20%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.Xuang-login span {
  color: red;
  font-size: 18 px;
  width: 30px;
  height: 30px;
  background: pink;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
}
</style>
